{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点餐系统</title>
    <link rel="stylesheet" href="{% static 'web/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/css/common.css' %}">
    <style type="text/css">
        body{min-height:2000px;padding-top:70px;}

        .navbar-default{background-color:#ff8800;border-color:#e7e7e7;}
        .navbar-default .navbar-brand{color:#fff;}
        .navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > li > a:visited {
            color: #fff;
            width:100px;
            font-size:14px;
            text-align:center;
        }
        .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:visited,.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav li a:active {
            color:#fff;
            background-color: #FF4500;
            width:100px;
            font-size:14px;
            text-align:center;
        }

        table tr td{font-size:11px;}
        table tr td.price{color:red;}
        table tr td.num span{color:red;padding:0px 5px}
        table tr td.num i{border-width:0px;background-color:#ddd;}

        div.shoplist div.bn{font-size:12px;line-height:25px;}
        div.shoplist div.bn span.price{color:red;}
    </style>
</head>
<body>
    <!-- 页头导航开始 -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span>
            <span style="font-weight:bold;">{{ request.session.shopinfo.name}}</span>
            <span style="font-size:14px;">（{{ request.session.shopinfo.shop}}）</span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">堂吃点餐</a></li>
            <li><a href="{% url 'web_orders_index' 1 %}?status=1">当前订单</a></li>
            <li><a href="{% url 'web_orders_index' 1 %}?status=3">历史订单</a></li>
              <li><a href="{% url 'web_orders_index' 1 %}?status=2">无效订单</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"> {{request.session.webuser.nickname}}</a></li>
            <li><a href="{% url 'web_logout' %}">退出</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <!-- 页头导航结束 -->

    <!-- 页面主体开始 -->
    <div class="container">
        <div class="col-md-4">
            <div class="panel panel-warning">
                <div class="panel-heading"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购 物 车</div>
                <table class="table table-striped">
                        <tr>
                            <th width="30">序</th>
                            <th>菜品</th>
                            <th width="72">数量</th>
                            <th width="45">单价</th>
                            <th>删除</th>
                        </tr>
                      {% for product in request.session.cartlist.values %}
                        <tr>
                            <td>{{forloop.counter}}</td>
                            <td>{{product.name}}</td>
                            <td class="num"><i onclick="window.location='{% url 'web_cart_change'%}?pid={{product.id}}&num={{product.num|add:-1}}'" class="btn btn-default btn-xs"> - </i>
                              <span>{{product.num}}</span><i onclick="window.location='{% url 'web_cart_change'%}?pid={{product.id}}&num={{product.num|add:1}}'" class="btn btn-default btn-xs"> + </i></td>
                            <td class="price">{{product.price}}</td>
                            <td><a href="{% url 'web_cart_delete' product.id %}" class="btn btn-danger btn-xs" role="button">删除</a></td>
                        </tr>
                       {% endfor %}
                    </table>

                    <li class="list-group-item">
                        <b>购买方式: &nbsp; </b>
                        <input type="radio" name="ptype" checked value="1"> 堂吃 &nbsp;
                        <input type="radio" name="ptype" value="2"> 打包 &nbsp;
                    </li>
                    <li class="list-group-item">
                        <b>支付方式: &nbsp; </b>
                        <input type="radio" name="bank" checked value="1"> 现金 &nbsp;
                        <input type="radio" name="bank" value="2"> 支付宝 &nbsp;
                        <input type="radio" name="bank" value="3"> 微信
                    </li>

                    <div class="panel-footer" style="height:50px">
                        <div style="width:120px;float:left;margin:5px 0px;">合计：￥<span style="color:red;font-weight:bold;">{{request.session.total_money}}</span> 元</div>
                        <button type="submit" onclick="dosubmit()" class="btn btn-warning" style="width:100px;float:right">结 &nbsp; 算</button>
                        <button type="button" onclick="window.location='{% url 'web_cart_clear' %}'" class="btn btn-danger" style="width:60px;float:right;margin-right:20px;"> 清 空 </button>
                    </div>

            </div>
        </div>
        <div class="col-md-8">
            <!--标签页内容-->
          {% for key,category in categorylist %}
            <h5 style="padding-bottom:9px;border-bottom:1px solid #eee;color:#BB3D00"><span class="glyphicon glyphicon-list" aria-hidden="true"> {{ category.name }}：</h5>
            <div class="row shoplist">
              {% for product in category.pids %}
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                      <img src="{% static 'uploads/product/' %}{{ product.cover_pic }}" width="150" alt="...">
                      <div class="caption">
                        <h6>{{ product.name }}</h6>
                        <div class="bn">￥<span class="price">{{ product.price }}</span>元</a>
                        <a href="{% url 'web_cart_add' product.id %}" class="btn btn-warning btn-xs pull-right" role="button"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a></div>
                      </div>
                    </div>
                </div>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
    </div>
    <!-- 页面主体结束 -->

    <script src="{% static 'web/js/jquery.min.js' %}"></script>
    <script src="{% static 'web/js/bootstrap.min.js' %}"></script>
    <script>
      //执行订单处理(下订单)
      function dosubmit(){
          //判断购物车中是否没有菜品
          if($("table.table-striped tr").length == 1){
            alert("购物车中没有菜品选择！");
            return;
          }
          //询问是否提交订单
          if(!window.confirm("确定要进行结算吗？")){
            return;
          }
          //获取要提交的数据
          var ptype = $("input[name='ptype']:checked").val();
          var bank = $("input[name='bank']:checked").val();
          //alert(ptype+":"+bank);
          //执行ajax提交订单
          $.ajax({
            type:"get",
            url:"{% url 'web_orders_insert' %}",
            dataType:"text",
            data:{ptype:ptype,bank:bank},
            success:function(res){
              if(res == "Y"){
                alert("订单添加成功！");
                window.location.href = "{% url 'web_index' %}";
              }else{
                alert("订单处理失败！");
              }
            }
          });
      }

    </script>
</body>
</html>